﻿<%@ page language="java" contentType="text/html; charset=utf-8"
         pageEncoding="utf-8"%>
<%@include file="../base.jsp"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<sys:genericTag4o id="columnsTag" methodName="getColumnList" className="com.tmpt.controller.taglib.TemplateTag">
  <sys:columnTag columnName="keyRandom" columnValue="${paramValues._keyRandom[0]}"/>
</sys:genericTag4o>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta http-equiv="Pragma" content="no-cache"/>
  <meta http-equiv="Cache-Control" content="no-cache"/>
  <meta http-equiv="Expires" content="0"/>

  <title>表单布局系统</title>
 
  <link rel="stylesheet" href="http://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
  <!--
  <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  -->
  <script src="api/jquery.min.js"></script>
  <script src="api/jquery-ui.min.js"></script>

    <link href="${path}/admin123/css/main.css" rel="stylesheet" type="text/css" />
	<link rel="stylesheet" type="text/css" href="easyui1.5/themes/bootstrap/easyui.css"/>
	<link rel="stylesheet" type="text/css" href="easyui1.5/themes/icon.css"/>
	<script src="easyui1.5/jquery.easyui.min.js"></script>
	<script src="easyui1.5/locale/easyui-lang-zh_CN.js"></script>
	
	<script src="myfiles/myui.js"></script>
	<link rel="stylesheet" href="myfiles/myui.css">

    <script type="text/javascript">
    var _keyRandom =  '${paramValues._keyRandom[0]}';
    var saveStyleUrl = "layoutUIAjax_saveStyle.action";
    </script>
</head>

<body class="font14">

<div id="header">
<div style="margin-top:8px;font-size:20px;">表单布局系统</div>
	<!--<button id="submit" style="margin-top:10px;">保存提交</button>-->
</div>
<div class="clear_div"></div>


<div id="products">
  <h3 class="ui-widget-header">控件区</h3>
  <div id="catalog">
    <h3><a href="#">基本控件</a></h3>
    <div>
      <ul>
        <li class="ui-state-default" uiclass="easyui-textbox">Textbox</li>
        <li class="ui-state-default" uiclass="easyui-passwordbox">Passwordbox</li>
        <li class="ui-state-default" uiclass="easyui-combobox">Select</li>
        <li class="ui-state-default" uiclass="easyui-datebox">Date</li>
        <li class="ui-state-default" uiclass="easyui-datetimebox">Datetime</li>
        <li class="ui-state-default" uiclass="easyui-textbox">Button(未实现)</li>
		<!--
        <li class="ui-state-default">NULL</li>
		-->
      </ul>
    </div>
    <h3><a href="#">布局</a></h3>
    <div>
      <ul>
        <li class="ui-state-default">Tab</li>
        <li class="ui-state-default">Group</li>
        <li class="ui-state-default">Datagrid</li>
      </ul>
    </div>
    
  </div>
</div>



<div id="properties">
  <h3 class="ui-widget-header">属性区</h3>
  <div id="properties_group">
    <h3><a href="#">控件属性</a></h3>
    <div style="font-size:14px;">
		<p>名称Label：<input id="contorller_columnNameShow" class="easyui-textbox" /></p>
		<p>字段Propt：<input id="contorller_columnName" class="easyui-textbox"  /></p>
		<p>提示&nbsp;&nbsp;Tips：<input id="contorller_columnTip" class="easyui-textbox" data-options='{"multiline":true}' /></p>

		<p>
			<select id="contorller_dataoptions" class="easyui-combobox" label="属性选择器data-options:" labelPosition="top"
				data-options="{multiple:true,multiline:true,width:200,height:100}">
				<option selected></option>
				<option>"height":40</option>
				<option>"width":300</option>
				<option>"required":true</option>
				<option>"multiline":true</option>
				<option>"editable":false</option>
				<option>"validType":"email"</option>
				<option>"readonly":true</option>
			</select>
		</p>
		
		<p>div-style:</p>
		<p><input id="contorller_div_style" class="easyui-textbox" size="15" data-options="multiline:true,editable:true" style="width:200px;height:30px"
			value=''/></p>

		<p></p>
		<p>
		<button id="applyCSSBtn" >应用效果</button>
		<button id="deleteUI" >删除选中控件</button>
		</p>
    </div>

    <h3><a href="#">布局窗口</a></h3>
    <div>
		<p>div-style:</p>
		<p><input id="contorller_layoutdiv_style" class="easyui-textbox" size="15" data-options="multiline:true" style="width:200px;"
			value='{"width":"700px"}'/></p>
		<p>
        <p>是否作为dialog框:</p>
        <p><input id="isdialog_adddialog" class="easyui-textbox" size="15" data-options="multiline:true" style="width:200px;"
                  value='${columnsTag.templateTable.isdialog4AddDialog}'/></p>
        <p>
		<button id="applyLayoutCSSBtn" >应用效果</button>
		</p>

    </div>
    
    <h3><a href="#">绑定数据</a></h3>
    <div id="columnname_datadiv">
      <ul>

        <s:iterator var="column" value="#attr.columnsTag.templateTable.a1TemplateColumnDtoList" status="st" >
          <li class="ui-state-default" column_name="${columnName}" column_name_show="${columnShowName}" > ${columnName}(${columnShowName})</li>
        </s:iterator>
      </ul>
    </div>
	
    <h3><a href="#">生成样式</a></h3>
    <div>
		<p><input id="controller_final_style" class="easyui-textbox" size="15" data-options="multiline:true" style="width:220px;height:300px;"
			value=''/></p>
		<p>
			<button id="genSystemStyleBtn" >生成样式</button>
			<button id="submit" >保存提交</button>
		</p>
		
    </div>
    
  </div>
</div>




<div id="layoutui" style="<s:if test="#attr.columnsTag.templateTable.style4AddDialog!=null && #attr.columnsTag.templateTable.style4AddDialog!=''"> ${columnsTag.templateTable.style4AddDialog}</s:if><s:else>width:800px;height:400px;</s:else>">
  <h3 class="ui-widget-header">布局区</h3>
  <div class="ui-widget-content">
    <ol class="connectedSortable">

      <s:iterator var="item" value="#attr.columnsTag.column4Add" status="st" >
        <li id="_${item.columnName}_line" class="ui-state-default" title="${item.columnTip}" <s:if test="#item.columnLayoutStyle4adddialog!=null && #item.columnLayoutStyle4adddialog!=''">style="${item.columnLayoutStyle4adddialog}"</s:if>>
          <label >${item.columnShowName}</label>

          <input class="${item.columnType}" name="${item.columnName}" uiname="${item.columnName}" id="${item.columnName}4Add"
               <s:if test="#item.dataOptions4AddDialog!=null && #item.dataOptions4AddDialog!=''">data-options=${item.dataOptions4AddDialog}</s:if><s:else>data-options={"valueField":"keyName","textField":"valueName"}</s:else>
                />

        </li>
      </s:iterator>

    </ol>
    <div style="clear:both;"></div>
  </div>
</div>


	

 
</body>
</html>